<template>
  <div class="ai__agent_detail " :class="{ 'ai__agent_detail--full': showErrIcon}">
    <div class="agent__info">
      <svg-icon @click="handleBack" icon-class="icon-back" class="fs-20 agent-back"></svg-icon>

      <img :src="chatStore.agent.icon" width="50" height="50" />
      <div>
        <p class="fs-18 fs-b mb-10 agent-name">{{ chatStore.agent.name }}</p>
        <div class="agent__info_other flex-basic fs-c-7 fs-12">
          <p v-if="chatStore.agent.hot">
            <svg-icon icon-class="fire-icon" class="fs-16"></svg-icon>
            <span class="agent-hot">{{ chatStore.agent.hot }}</span>
          </p>
          <p>@{{ chatStore.agent.author }}</p>
        </div>
      </div>
      <el-tooltip
        content="收藏"
        placement="left"
        :offset="6"
        :open-delay="300"
      >
        <svg-icon
          @click="handleActionStar"
          icon-class="star-btn"
          title="收藏"
          class="star-btn fs-20 ml-a cursor"
          :class="{ active: chatStore.agent.is_star }">
        </svg-icon>
        <template slot="content">
          <div class="tooltip-content">收藏</div>
        </template>
      </el-tooltip>
    </div>
    <div class="agent__info_desc mt-10">
      {{ chatStore.agent.desc }}
    </div>
    <div class="empty__info_desc fs-14">
      <img src="@/assets/error-robot.png" width="50" height="50" />
      <p>{{ chatStore.agent.desc }}</p>
    </div>
    <div class="questions__list">
      <div
        class="question__item mb-8"
        v-for="item in questions"
        :key="item"
        @click="handleNewChat(item)">
        <span class="question__text" :title="item">{{ item }}</span>
        <svg-icon
          icon-class="arrow-long"
          class="fs-20 ml-a flex-shrink-0"></svg-icon>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { starAgentApi, unstarAgentApi } from '@/api/agent'
import { getHistory } from '@/api/chat'
export default {
  name: 'AiAgent',
  inject: ['detectIsLogin', 'sendMessage', 'setHistoryMessage', 'addNewMessage'],
  components: {
  },
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['chatStore', 'agentStore']),
    questions () {
      return (
        this.chatStore.agent?.assistant.third_detail.model_config?.suggested_questions?.filter(
          (v) => v
        ) || []
      )
    },
    showErrIcon () {
      return ![451, 489].includes(this.chatStore.agent?.id) && !this.questions.length
    }
  },
  methods: {
    async handleActionStar () {
      if (!this.detectIsLogin()) return
      const is_star = this.chatStore.agent.is_star
      const api = is_star ? unstarAgentApi : starAgentApi
      const { data } = await api(this.chatStore.agent.id)
      if (data?.code === 200) {
        this.$PsMessage({ message: is_star ? '取消收藏成功' : '收藏成功' })
        // eslint-disable-next-line sonarjs/no-duplicate-string
        this.$store.dispatch('chat/setChatStore', { agent: { ...this.chatStore.agent, is_star: !is_star } })
        return
      }
      this.$PsMessage({ message: data?.msg || '服务请求错误，请稍后再试' })
    },
    handleNewChat (v) {
      if (!this.detectIsLogin()) return
      this.sendMessage(v)
    },

    async handleBack () {
      if (!this.agentStore.noFromHome) {
        this.$store.dispatch('agent/setAgentShow', true)
        this.$store.dispatch('chat/setChatStore', { isChating: false })
      } else if (this.chatStore.prevConversionId) {
        const { data } = await getHistory({ page: 1, page_size: 15 })
        const list = data?.conversations || []
        if (list.length > 0) {
          const param = list.find((v) => v.conversation_id === this.chatStore.prevConversionId)
          if (param) this.setHistoryMessage(param)
        }
        this.$store.dispatch('chat/setChatStore', { prevConversionId: '' })
      } else {
        await this.addNewMessage()
      }
      this.$store.dispatch('agent/setNoFromHome', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.ai__agent_detail {
  color: rgba(255,255,255,0.7);
}
.ai__agent_detail--full {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  .agent__info_desc {
    display: none;
  }
  .empty__info_desc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 100%;
  }
}
.agent__info {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  img {
    border-radius: 10px;
  }
  .agent-hot {
    margin: 0 10px 0 4px;
  }
  .agent-back:hover, .agent-name {
    color: #fff;
  }
  .agent__info_other {
    align-items: baseline;
  }
}
.agent__info_desc {
  line-height: 20px;
  font-size: 12px;
}
.empty__info_desc {
  display: none;
  text-align: center;
  line-height: 1.6;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 30px;
  gap: 10px;
}
.star-btn {
  color: #d4d4d4;
  line-height: 1;
  &.active, &:hover {
    color: $star-btn-active;
  }
}
.questions__list {
  margin-top: 10px;
}
.question__item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 12px;
  line-height: 20px;
  .question__text {
    flex: 1 1 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1;
  }
  &:hover {
    background: rgba(255,255,255,0.2);
    border: 1px solid #4E5FFF;
    padding: 7px 15px;
    font-weight: bold;
    color: #fff;
  }
}
</style>
